<template>
  <!-- 常见问题 -->
  <div class="app-container">
    <div class="filter-container">
      <k-button class="top-btn" value="创建" @click.native="addItemDialog" />
    </div>
    <!--表格相关 -->
    <el-table
      ref="dragTable"
      :data="listData"
      fit
      border
      row-key="id"
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >

      <el-table-column min-width="60px" align="center" type="index" label="编号" width="150" />
      <el-table-column prop="duration" min-width="150px" label="时长(分钟)" align="center" show-overflow-tooltip />

      <el-table-column prop="price" min-width="150px" label="金额（95币）" align="center" show-overflow-tooltip />
      <el-table-column pros="cue" min-width="200px" label="提示信息" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.cue }}
        </template>
      </el-table-column>
      <el-table-column pros="cue" min-width="200px" label="提示信息" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#3b425d"
            inactive-color="#E9EBF2"
            active-text="开启"
            inactive-text="关闭"
            :active-value="1"
            :inactive-value="2"
            @change="boxOnlineState(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column min-width="200px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button class="table-btn" value="修改/查看" @click.native="itemUpdateDialog(scope.row)" />
            <k-button class="table-btn" value="删除" @click.native="deleteCompany(scope.row)" />
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加 弹窗 -->
    <k-dialog
      :show-hide.sync="showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      :title="textMap[dialogStatus]"
      class="addBox-dialog"
      :show-foot="false"
      width="50%"
      :two-btn="true"
      :close-fun="close"
      @click="saveItemDataClick"
    >
      <el-form ref="addItemInfoRef" :model="addItemInfo" label-width="auto" class="form-modify">
        <el-form-item
          label="时长："
          prop="duration"
          :rules="[
            { required: true, message: '时长不能为空' },
            { type: 'number', message: '时长必须为数字值' }
          ]"
        >
          <el-input v-model.number="addItemInfo.duration" placeholder="请输入时长(分钟)">
            <template slot="append">分钟</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="金额（95币）："
          prop="price"
          :rules="[
            { required: true, message: '金额不能为空' },
            { type: 'number', message: '金额必须为数字值' }
          ]"
        >
          <el-input v-model.number="addItemInfo.price" placeholder="请输入金额">
            <template slot="append">{{ tipsUnitValue }}95币</template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="tipsValue" label="智能提示：">
          <div>
            <div> {{ tipsValue }}</div>
            <div><k-button value="使用此提示" @click.native="addItemInfo.cue = tipsValue" /></div>
          </div>

        </el-form-item>
        <el-form-item
          label="提示信息："
          prop="cue"
          :rules="[
            { required: true, message: '提示信息不能为空' },
          ]"
        >
          <el-input v-model="addItemInfo.cue" type="textarea" show-word-limit placeholder="请输入提示信息" rows="5" />
        </el-form-item>
      </el-form>
    </k-dialog>

  </div>
</template>

<script>

import {
  listReminderSetting,
  saveReminderSetting,
  updateReminderSetting,
  updateReminderSettingStatus,
  deleteReminderSetting
} from '@/api/settings/settings.js'
export default {
  data() {
    return {
      // 创建还是修改
      dialogStatus: 'create',
      textMap: {
        create: '创建提示',
        update: '修改提示'
      },
      // 创建和修改的表单
      showHide: false,
      // 开关
      upStatus: 0,

      addItemInfo: {
        duration: '', // 时长
        price: '', // 金额
        cue: '' // 提示
      },

      listData: [],
      parameter: {
        pager: {
          pageNo: 1,
          pageSize: 10
        }
      }
    }
  },
  computed: {
    tipsValue() {
      if (!this.addItemInfo.duration || !this.addItemInfo.price) return
      return `您在 ${this.addItemInfo.duration}分钟内消费满 ${this.addItemInfo.price} 个95币，请谨慎消费`
    },
    tipsUnitValue() {
      if (!this.addItemInfo.price) return
      if (this.addItemInfo.price.toString().length < 3) return
      const tipsUnitMap = {
        3: '百',
        4: '千',
        5: '万',
        6: '十万',
        7: '百万',
        8: '千万',
        9: '亿',
        10: '十亿'
      }
      return tipsUnitMap[this.addItemInfo.price.toString().length]
    }

  },
  created() {
    this.getlist()
  },
  methods: {
    // 列表页加载数据
    getlist() {
      listReminderSetting(this.parameter).then(res => {
        this.listData = res.data.rows
      })
    },
    // 点击创建
    addItemDialog() {
      this.showHide = true
      this.dialogStatus = 'create'
      this.$nextTick(() => {
        this.addItemInfo = {
          duration: '',
          price: '',
          cue: ''
        }
        this.$resetForm(this.addItemInfo)
        this.$refs.addItemInfoRef.resetFields()
      })
    },
    // 点击修改
    itemUpdateDialog(row) {
      this.dialogStatus = 'update'
      this.showHide = true
      const data = {
        ...row
      }
      this.addItemInfo.id = data.id
      this.addItemInfo.duration = data.duration
      this.addItemInfo.price = data.price
      this.addItemInfo.cue = data.cue
    },

    // 添加|修改
    saveItemDataClick() {
      // 创建
      this.$refs.addItemInfoRef.validate(async(valid) => {
        if (valid) {
          if (this.dialogStatus === 'create') {
            await saveReminderSetting(this.addItemInfo).then(res => {
              this.$message.success('操作成功')
            })
          } else {
            // 修改
            await updateReminderSetting(this.addItemInfo).then(res => {
              this.$message.success('操作成功')
            })
          }
          this.getlist()
          this.showHide = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
      //
    },
    // 单个开关
    boxOnlineState(row) {
      console.log('event: ', row)
      row.status == 1 ? 2 : 1
      updateReminderSettingStatus({
        id: row.id,
        status: row.status
      }).then(res => {
        if (res.data.success) {
          this.$message.success('操作成功')
        }
      })
    },
    // 删除(二次确认)
    deleteCompany(row) {
      this.$confirm('是否删除当前提示', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        if (row.status == 1) return this.$message.error('已开启,不允许删除')
        await deleteReminderSetting(row.id)
        this.$message.success('删除成功')
        this.getlist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    close() {
      this.$refs.addItemInfoRef.resetFields()
      this.addItemInfo = {
        duration: '',
        price: '',
        cue: ''
      }
    }

  }
}
</script>
<style>
.sortable-ghost {
  opacity: .8;
  color: #fff !important;
  background: #3b425d !important;
}
</style>
<style lang="scss" scoped>
$mainColor: #3b425d; // 主色调
$disabledColor: #909399; //禁用色
$hoverColor: #1D143C; // 鼠标停留主色调浅色

::v-deep .el-select .el-input.is-focus .el-input__inner {
  border-color: $mainColor;
}

::v-deep .el-input__inner:focus {
  border-color: $mainColor;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.price-input {
  width: 70px;
}

.addBox-dialog {
  ::v-deep .el-dialog {
    width: 30% !important;
  }

  ::v-deep .el-dialog__body {
    padding: 10px 80px;
  }

  ::v-deep .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 40px;
  }

  ::v-deep .el-textarea__inner:focus {
    outline: 0;
    border-color: $mainColor;
  }
}

.upload-btn {
  font-size: 14px;
  color: #ffffff;
}

.editer {
  border-radius: 8px;
  float: left;
  box-sizing: border-box;
  color: #606266;

  ::v-deep .ql-container {
    height: 440px;
    border-radius: 0px 0px 8px 8px;
  }

  ::v-deep .ql-toolbar.ql-snow {
    border-radius: 8px 8px 0px 0px;
  }

}

.dialog-warningSetting {
  ::v-deep.el-input {
    width: 110px;
  }

  .price-input {
    width: 100px;
  }

  .el-icon {

    &-circle-plus,
    &-remove {
      font-size: 22px;
      color: #3b425d;
      margin-left: 10px;

    }
  }

  ul {
    list-style-type: none;
    margin-top: 20px;
    padding: 0;

    li {
      margin: 0 0 30px 0px;
      display: flex;
      flex-direction: row;
      align-items: center;

      i {
        color: #D1D5DD;
      }
    }
  }

  .warning-title {
    font-size: 16px;
    color: #14162E;

    &-right {
      font-size: 16px;
      color: #14162E;
      margin-left: 80px;
    }

    &-right2 {
      font-size: 16px;
      color: #14162E;
      margin-left: 20px;
    }
  }
}

.table-btn {
  width: 90px;
  height: 35px;
  line-height: 35px;
  padding: 0;
  background: #e7ecf8;
  border: 1px solid $mainColor;
  border-radius: 8px;
  font-size: 14px;
  color: $mainColor;

  &:hover {
    background: $mainColor;
    color: #fff;
  }

  &:focus {
    background-color: #e7ecf8;
  }
}

.filter-container {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .top-btn {
    font-size: 14px;
    color: #ffffff;
  }

  .kInput {
    position: absolute;
    right: 20px;
  }
}

.chargeform {
  display: flex;
  flex-direction: row;
}
</style>
